<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function create() {
            clear();
            var fragement = document.createDocumentFragment();
            var box = document.getElementById("box")
            var count = document.getElementById("num").value;
            for (var i = 0; i < count; i++) {
                var ele = document.createElement("img");
                ele.setAttribute("src", "img/off.png");
                ele.setAttribute("width", "200px");
                fragement.appendChild(ele);
            }
            box.appendChild(fragement);
            setInterval(blink, 100);
        }

        function blink() {
            var arry = document.getElementsByTagName("img");
            for (var i = 0; i < arry.length; i++) {
                if (Math.random() - 0.5 < 0) {
                    arry[i].src = "img/on.png";
                } else {
                    arry[i].src = "img/off.png";
                }
            }
        }

        function clear() {
            var arry = document.getElementsByTagName("img");
            for (var i = arry.length - 1; i >= 0; i--) {
                arry[i].parentNode.removeChild(arry[i]);
            }
        }
    </script>
</head>
<body>
<span>输入彩灯数:</span>
<input type="text" id="num"/>
<button id="btn1">生成</button>
<button id="btn2">清除</button>
<hr/>
<div id="box"></div>
</body>
</html>

<script type="text/javascript">
    document.getElementById("btn1").addEventListener("click", create, true)
    document.getElementById("btn2").addEventListener("click", clear, true);
</script>